<!--============================================================================*
 *  This file is part of SMAD.                                                  *
 *                                                                              *
 *  SMAD is free software: you can redistribute it and/or modify                *
 *  it under the terms of the GNU Lesser General Public License as published by *
 *  the Free Software Foundation, either version 3 of the License, or           *
 *  (at your option) any later version.                                         *
 *                                                                              *
 *  SMAD is distributed in the hope that it will be useful,                     *
 *  but WITHOUT ANY WARRANTY; without even the implied warranty of              *
 *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the               *
 *  GNU Lesser General Public License for more details.                         *
 *                                                                              *
 *  You should have received a copy of the GNU Lesser General Public License    *
 *  along with SMAD. If not, see <http://www.gnu.org/licenses/>.                *
 *                                                                              *
 * =============================================================================*
 *  Please note, ARC2, jQuery and jQuery Mobile are not included in this        *
 *  license and are available under their own license. For more information     *
 *  visit:                                                                      *
 *     ~ https://github.com/semsol/arc2/wiki                                    *
 *     ~ http://jquery.org/license/                                             *
 * ===========================================================================-->


<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width">
	<link rel="stylesheet" href="libs/jquery.mobile-1.0b1.min.css">
	<script src="phonegap.js" type="text/javascript" charset="utf-8"></script>
	<script src="libs/jquery-1.6.2.min.js"></script>
	<script src="libs/jquery.mobile-1.0b1.min.js"></script>
	<script src="libs/icanhaz.min.js"></script>
	<script src="smad.js"></script>
	<link rel="stylesheet" href="smad.css" />
</head>

<body>
	<!-- Start-Page: Chose between Search and Around me -->
	<div id="Start" data-url="Start" data-role="page">
		<div data-role="header" data-backbtn="false">
			<a href="#Start" data-role="button" data-icon="home" data-iconpos="notext">Home</a> 
			<h1>Semantic Local Scout</h1>
		</div>
		
		<div data-role="content">
			<a id="StartButtonAroundMe" href="javascript:void(0)" data-role="button">Around Me</a>
			<a href="#Search" data-role="button">Around Address</a>
		</div>
	</div>

	<!-- Search-Page: Instead of his real location, the user can search via Street Name, etc... -->	
	<div id="Search" data-url="Search" data-role="page">
		<div data-role="header" data-backbtn="false">
			<a href="#Start" data-role="button" data-icon="home" data-iconpos="notext">Home</a> 
			<h1>Semantic Local Scout</h1>
		</div>
			
		<div data-role="content">
			<form>
			<div data-role="fieldcontain">
			    <label for="address">Address: </label>
			    <input type="text" name="address" id="SearchAddress" value="Ravensburg, Germany" />
			</div>
			</form>
			<br>
			<a href="javascript: startAddressSearch();" data-role="button" data-iconpos="right" data-icon="arrow-r">Search</a>
			<a href="#Start" data-role="button" data-icon="arrow-l">Back</a>	
		</div>
		
	</div>
	
	<!-- Result-Map-Page: The app shows all not filteres venues on the map -->	
	<div id="ResultMap" data-url="ResultMap" data-role="page">
		<div data-role="header" data-backbtn="false">
			<a href="#Start" data-role="button" data-icon="home" data-iconpos="notext">Home</a> 
			<h1>Semantic Local Scout</h1>
		</div>
		
		<div data-role="content">
			<ul data-role="listview" id="ResultMapTopContainer" style="text-align: center;"></ul>
		</div>
		
		<div data-role="footer">
			<div class="ui-grid-b">
				<a class="ui-block-a" id="ResultMapFooterButton1" data-role="button" data-iconpos="top" data-theme="a" href="#Start" data-icon="home">Home</a>
				<a class="ui-block-c" id="ResultMapFooterButton2" data-role="button" data-iconpos="top" data-theme="a" href="#ResultList" data-icon="ci-list">Result List</a>	   
				<a class="ui-block-b" id="ResultMapFooterButton3" data-role="button" data-iconpos="top" data-theme="a" href="javascript:void(0)" data-icon="refresh">Refresh</a>
			</div>
		</div>
	</div>

	<!-- Result-List-Page: The app lists all venues and allows him to filter it -->	
	<div id="ResultList" data-url="ResultList" data-role="page">
		<div data-role="header" data-backbtn="false">
			<a href="#Start" data-role="button" data-icon="home" data-iconpos="notext">Home</a> 
			<h1>Semantic Local Scout</h1>
		</div>
		
		<div data-role="content">
			<ul id="ResultListTopContainer" data-role="listview"></ul>
			<ul id="ResultListResultsList" style="margin: 15px -15px -15px;" data-role="listview"></ul>
		
			<div id="ResultListFilter" data-role="fieldcontain" style="display: none; margin: 0;">
			 	<fieldset data-role="controlgroup">
					<input type="checkbox" name="filterAllOverride" id="checkbox-1a" data-theme="a" class="filterItem" />
					<label for="checkbox-1a">Deactivate All Filters</label>

					<input type="checkbox" name="filterMaximumDistance" id="checkbox-2a" class="filterItem" />
					<label for="checkbox-2a">Maximum Distance <span id="filerMaximumDistanceSpan" style="display: none; float: right; font-size: x-small;"></span></label>
					
					<input type="checkbox" name="filterClosed" id="checkbox-3a" class="filterItem" />
					<label for="checkbox-3a">Hide Closed</label>

					<input type="checkbox" name="filterBarelyOpen" id="checkbox-4a" class="filterItem" />
					<label for="checkbox-4a">Hide Barely Open</label>
					
					<input type="checkbox" name="filterNoOpeningInformation" id="checkbox-5a" class="filterItem" />
					<label for="checkbox-5a">Hide No Opening Information</label>
					
					<input type="checkbox" name="filterOpen" id="checkbox-6a" class="filterItem" />
					<label for="checkbox-6a">Hide Open</label>
			    </fieldset>
			</div>
		</div>
		<div data-role="footer">
			<div class="ui-grid-b">
				<a class="ui-block-a" id="ResultListFooterButton1" data-role="button" data-iconpos="top" data-theme="a" href="javascript:void(0)" data-icon="search">Filter</a>
				<a class="ui-block-c" id="ResultListFooterButton2" data-role="button" data-iconpos="top" data-theme="a" href="#ResultMap" data-icon="ci-map">Result Map</a>	   
				<a class="ui-block-b" id="ResultListFooterButton3" data-role="button" data-iconpos="top" data-theme="a" href="javascript:void(0)" data-icon="arrow-r">First Venue</a>
			</div>
		</div>
	</div>
	
	<!-- Details-Page:  -->	
	<div id="Details" data-url="Details" data-role="page">
		<div data-role="header" data-backbtn="false">
			<a href="#Start" data-role="button" data-icon="home" data-iconpos="notext">Home</a> 
			<h1>Semantic Local Scout</h1>
		</div>
		
		<div data-role="content">
			<ul data-role="listview" id="venueTopContainer" style="text-align: center;"></ul>
			
			<div data-role="collapsible" data-collapsed="true" id="venueOpeningHours" style="margin: 1.4em 0px;">
				<h3>Opening Hours <i style="font-weight: normal;"></i>:</h3>
				<ul data-role="listview" data-inset="true" id="venueOpeningHoursContainer" style="margin: 0;">
				</ul>
			</div>
			<div data-role="collapsible" data-collapsed="true" id="venueMore" style="margin: 1.4em 0px;">
				<h3>More</h3>
				<ul data-role="listview" data-inset="true" id="venueMoreContainer" style="margin: 0;">
				</ul>
			</div> 
		</div>
		
		<div data-role="footer">
			<div class="ui-grid-b">
				<a class="ui-block-a" id="DetailsFooterButton1" data-role="button" data-iconpos="top" data-theme="a" href="javascript:void(0)" data-icon="arrow-l">Previous</a>
				<a class="ui-block-c" id="DetailsFooterButton2" data-role="button" data-iconpos="top" data-theme="a" href="#ResultList" data-icon="ci-list">Result List</a>	   
				<a class="ui-block-b" id="DetailsFooterButton3" data-role="button" data-iconpos="top" data-theme="a" href="javascript:void(0)" data-icon="arrow-r">Next</a>
			</div>
		</div>
	</div>

	
	<!-- Offerings-Page: -->
	<div id="Offerings" data-url="Offerings" data-role="page">
		<div data-role="header" data-backbtn="false">
			<a href="#Start" data-role="button" data-icon="home" data-iconpos="notext">Home</a> 
			<h1>Semantic Local Scout</h1>
		</div>
		
		<div data-role="content">
			<ul data-role="listview" id="offeringsContainer">
			</ul>
		</div>
		
		<div data-role="footer">
			<div class="ui-grid-b">
				<a class="ui-block-a" data-role="button" data-iconpos="top" data-theme="a" href="#Details" data-icon="arrow-l">Details</a>
				<a class="ui-block-b" data-role="button" data-iconpos="top" data-theme="a" href="#ResultMap" data-icon="ci-map">Result Map</a>
				<a class="ui-block-c" data-role="button" data-iconpos="top" data-theme="a" href="#ResultList" data-icon="ci-list">Result List</a>	   
			</div>
		</div>
	</div>

<!-- Templates for the Result-Page -->
<script id="tmp_resultHeader" type="text/html">
	<li data-role="list-divider">{{ text }}<span class="ui-li-count">{{ counter }}</span></li>
</script>

<script id="tmp_resultItem" type="text/html">
	<li class="resultItem"><a href="javascript:void(0)"><img src="./imgs/32x32-open-{{ code }}.png" class="ui-li-icon" style="left: 5px; top: 5px;"/>{{ listnumber }}. {{ name }}<span class="ui-li-count">{{ distance }}m</span></a></li>
</script>

<script id="tmp_resultMessage" type="text/html">
	<div style="text-align: center; font-weight: bold; margin: 10%;" class="placeholder">{{ message }}</div>
</script>

<!-- Templates for the Details-Page -->
<script id="tmp_detailsTopHeader" type="text/html">
	<li data-role="list-divider" style="font-weight: normal;"><b>{{ listnumber }}.</b> Details for <b>{{ label }}</b></li>
</script>
<script id="tmp_detailsTopMap" type="text/html">
	<img src="{{ imagesrc }}" width="{{ size }}" height="{{ size }}" alt="Detailed Map" />
</script>
<script id="tmp_detailsTopClickToActionButton" type="text/html">
	<a href="" data-inline="true" data-role="button" data-theme="{{ theme }}"> {{ label }}</a>
</script>	
<script id="tmp_detailsTopPaymentMethods" type="text/html">
	<img src="./imgs/32x32-{{ paymentmethod }}.png" width="48" height="48" alt="{{ paymentmethod }}"/>
</script>	
		
<script id="tmp_detailsInstantViewsWithLogo" type="text/html">
	<li style="font-weight: normal; padding: 0.7em 15px 0.7em 90px; text-align: justify;"><img src="{{ imagesrc }}" alt="Logo"><div><b>{{ label }} </b>{{ text }}</div></li>
</script>
<script id="tmp_detailsInstantViewsNoLogo" type="text/html">
	<li style="font-weight: normal; padding: 0.7em 15px; text-align: justify;"><b>{{ label }}</b> {{ text }}</li>
</script>
<script id="tmp_detailsInstantViewsOfferings" type="text/html">
	<li data-theme="{{ theme }}"><a href="javascript:void(0)"><b>{{ label }}</b></a><span class="ui-li-count">{{ count }}</span></li>
</script>

<script id="tmp_detailsOpeningHoursDivider" type="text/html">
	<li data-role="list-divider">{{ day }}</li>
</script>
<script id="tmp_detailsOpeningHours" type="text/html">
	<li>{{ opens }} - {{ closes }}</li>
</script>

<script id="tmp_offeringsOffer" type="text/html">
	<li><a href="{{ seealso }}" target="_blank">
		<h3>{{ label }}</h3>
		<p>{{ text }}</p>
		<p class="ui-li-aside"><strong>{{ price }}</strong></p>
	</a></li>
</script>
</body>
</html>